<template>
  <div class="header">
    <div class="PCheader">
      <!-- <i class="iconfont iconcaidan leftmenuNav" @click="showMenu"></i> -->
      <index-logo class="Logo"></index-logo>

      <ul class="right">
        <div style="position: relative"></div>
        <li v-for="(item, index) in routerConfig" :key="index" @click="GoRouter(item)" :class="{ active: activePath === item.route }">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </li>
        <li @click="route.path !== '/mine' && router.push('/mine')" v-if="isLogin" :class="{ active: activePath === '/mine' }">
          <i class="iconfont iconwo"></i>
          <span>我的</span>
        </li>

        <li v-if="!isLogin">
          <button class="needLogin" @click="route.path !== '/login' && router.push('/login')">
            <i class="iconfont icondenglu"></i> 登录
          </button>
        </li>
        <li class="userInfo" v-if="isLogin" @click="showChangeUser">
          <img :src="img" alt="" />
          <!-- {{ realname }} -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import indexLogo from '@/components/IndexLogo.vue'
import Bus from '../../bus'
// import searchBar from "@/components/search.vue";
import axios from '@/http'
import { ref, onMounted, computed, onBeforeUnmount, defineEmits } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { routerConfig } from './const'
import { RouterConfigType } from './type'

const store = useStore()
const route = useRoute()
const router = useRouter()
const searchText = ref<string>('')
const content = ref<Array<any>>([])
//分页查询
const pageno = ref<number>(1) //页数
const pagesize = ref<number>(7) //每页大小
onMounted(() => getCurrentItem())

const activePath = computed(() => {
  console.log(route.path)
  const mainPath = route.path.split('/')[1]
  return `/${mainPath}`
})
const ifrouter = computed(() => route.path === '/index')
const realname = computed(() => store.getters.user.realname)
const img = computed(() => store.getters.user.avatar)
const isLogin = computed(() => store.getters.isToken)

const GoRouter = (item: RouterConfigType) => {
  route.path !== item.route && router.push(item.route)
}
const showChangeUser = () => {
  router.push('/mine')
}

//获取前7的的博客
const getCurrentItem = () => {
  Bus.$on('searchSevenContent', (msg: any) => {
    content.value = msg
  })
  console.log(Bus)
}

const searchBlogs = () => {
  axios
    .get('/blog/alllist', {
      params: {
        status: store.getters.user.status,
        title: searchText.value,
        pageno: pageno.value,
        pagesize: pagesize.value
      }
    })
    .then((res) => {
      console.log(res)
      if (res.data.error === 0) {
        content.value = []
      } else {
        content.value = res.data.data
      }
    })
}

onBeforeUnmount(() => {
  Bus.$off('clickSearchItemForBlog')
  Bus.$off('searchSevenContent')
})
</script>

<style lang="scss" scoped>
@import url('../../css/comment/animate.css');
// @import url("../../css/mobile/mvheader.scss");
@import '../../css/pc/header.scss';

.leftMenu {
  left: 0;
  animation: rightMove 0.3s ease-in-out;
}

@keyframes rightMove {
  0% {
    left: -40%;
  }

  100% {
    left: 0;
  }
}

@font-face {
  font-family: 'advice';
  src: url('../../assets/font/advice (2).woff');
  src: url('../../assets/font/advice (2).woff') format('woff');
}

@font-face {
  font-family: 'advice1';
  src: url('../../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff');
  src: url('../../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff') format('woff');
}
@font-face {
  font-family: 'advice1';
  src: url('../../assets/font/f2cf821cada34f187f964652c2b0e522.woff');
  src: url('../../assets/font/f2cf821cada34f187f964652c2b0e522.woff') format('woff');
}
@font-face {
  font-family: 'advice1';
  src: url('../../assets/font/fba3cceeb411bd5f1856804fe4207b51.woff');
  src: url('../../assets/font/fba3cceeb411bd5f1856804fe4207b51.woff') format('woff');
}
@font-face {
  font-family: 'advice1';
  src: url('../../assets/font/06e0c7085ff67d99c7b985951e21394a.woff');
  src: url('../../assets/font/06e0c7085ff67d99c7b985951e21394a.woff') format('woff');
}
@font-face {
  font-family: 'advice1';
  src: url('../../assets/font/87592ac31b9bcbb3c37598e068ec2996.woff');
  src: url('../../assets/font/87592ac31b9bcbb3c37598e068ec2996.woff') format('woff');
}

span {
  font-family: 'advice', 'advice1';
}

.searchB {
  position: absolute;
  left: 15px;
}

.search-enter-from,
.search-leave-to {
  opacity: 0;
  transform: translateY(-300px);
}

.search-enter-active,
.search-leave-active {
  transition: all 0.5s;
}
</style>
